<template>
	<view class="zwz-comment">
		<!-- <view class="mask" style="opacity: 0.2" @tap="hide" v-if="showMask" @touchmove.stop.prevent="moveHandle"></view> -->
		<view class="comment-num">{{ comments.length == 0 ? '快来评论吧~' : comments.length + '条评论' }}</view>
		<view>
			<view class="comment-item-main" v-for="(item, index) in comments" :key="item.id" :id="index">
				<view class="comment-item">
					<view class="left">
						<image :src="item.avatar" class="img"></image>
					</view>
					<view class="content">
						<view class="title-name">{{ item.nickname }}</view>
						<view class="content-text">
							<text>{{ item.content }}</text>
						</view>
						<view class="content-btm">
							<text>{{timestampFormat(item.addTime)}}</text>
							<text class="btm-back"
								@tap="replyComment(item.nickname, item.id)">回复</text>
						</view>
					</view>

				</view>
				<view v-if="showReplyList.indexOf(item.id) !== -1 || item.children.length < 3">
					<view class="comment-item items" v-for="(i,index) in item.children" :key="index">
						<view class="left" style="width: 65rpx;height: 65rpx;">
							<image style="width: 65rpx;height: 65rpx;" :src="i.avatar" class="img"></image>
						</view>
						<view class="content">
							<view class="title-name">
								<view>{{ i.nickname }}</view>
								<view v-if="i.superNickname">@</view>
								<view v-if="i.superNickname">{{ i.superNickname }}</view>
							</view>
							<view class="content-text">
								<text>{{ i.pcontent }}</text>
							</view>
							<view class="content-btm">
								<text>{{timestampFormat(i.addTime)}}</text>
								<text class="btm-back" @tap="replyComment(i.nickname,i.id)">回复</text>
							</view>
						</view>

					</view>
				</view>
				<view class="spread" v-if="item.children.length > 2" @tap="isShowReply(item.id, index)">
					<text>{{ showReplyList.indexOf(item.id) !== -1 ? '收起' : '展开' + item.children.length + '条回复' }}</text>
					<text :class="showReplyList.indexOf(item.id) !== -1 ? 'up' : 'down'"></text>
				</view>
			</view>
		</view>
		<!-- <view class="comment-btm" style="position: fixed; bottom: 0; left: 0;">
			<input type="text" :placeholder="placeholderComment" :focus="iptFocus" @focus="showgunagbiao"
				v-model="value" @blur="showfocus" />
			<button @click="sendCourseComment(CommentId, superUserId, tier)" style="">发送</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: 'zwz-comment',
		props: {
			comments: {
				type: Array,
				default: () => {
					return [];
				}
			},
			// showMask:false
		},
		data() {
			return {
				showReplyList: [],				
				superCommentId: 0
			};
		},
		methods: {

			// hide() {
			// 	this.$emit("hide")
			// },
			// 展开、收起
			isShowReply(id, index) {
				if (this.showReplyList.indexOf(id) == -1) {
					this.showReplyList.push(id);
					this.$emit('reply-click', this.book);
				} else {
					let index = this.showReplyList.indexOf(id);
					this.showReplyList.splice(index, 1);
				}
			},
			// 回复评论
			replyComment(userNickName, id) {
				this.$emit("replycomment",userNickName,id)
			},
			// 时间
			timestampFormat(timestamp) {
				if (!timestamp) return '';

				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}

				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();

				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.zwz-comment {
		// height: 1000rpx;
		width: 100%;
		background-color: #fff;
		// overflow: scroll;
	}

	.zwz-comment .comment-num {
		text-align: center;
		color: #000;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.comment-item-main {
		margin-bottom: 40rpx;

		.comment-item {
			display: flex;
			padding: 0 20rpx;

			.left {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.content {
				flex: 1;
				margin: 0 20rpx;
				font-size: 24rpx;

				.title-name {
					color: #bbbbbb;

					/* display: inline-block; */
					view {
						max-width: 150rpx;
						display: inline-block;
						margin-right: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.content-text {
					/* width: 480rpx; */
					font-size: 24rpx;
					margin: 20rpx 0;
				}

				.content-btm {
					color: #bbbbbb;
					margin-bottom: 20rpx;

					.btm-back {
						margin-left: 40rpx;
						font-size: 24rpx;
					}
				}
			}

			.right {
				height: 70rpx;

				.img-like {
					image {
						display: block;
						width: 50rpx;
						height: 50rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.spread {
			color: #000;
			margin-left: 120rpx;
			height: 34rpx;
			position: relative;
			font-size: 26rpx;

			.down {
				width: 0;
				height: 0;
				position: absolute;
				margin-left: 5px;
				top: 7px;
				border-right: 8px solid transparent;
				border-left: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-top: 8px solid #bbbbbb;
			}

			.up {
				width: 0;
				height: 0;
				position: absolute;
				margin-left: 5px;
				bottom: 4px;
				border-right: 8px solid transparent;
				border-left: 8px solid transparent;
				border-bottom: 8px solid #bbbbbb;
				border-top: 8px solid transparent;
			}
		}
	}

	.items {
		margin-left: 80rpx;
	}

	.comment-btm {
		height: 140rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;

		input {
			height: 70rpx;
			width: 400rpx;
			border-radius: 20rpx;
			background-color: #f3f3f3;
			margin-left: 80rpx;
			padding: 10rpx;
			font-size: 28rpx;
		}

		button {
			height: 70rpx;
			font-size: 30rpx;
			margin-top: 10rpx;
			line-height: 70rpx;
			text-align: center;
		}
	}

	.comment-like-num {
		display: inline-block;
		width: 50rpx;
		text-align: center;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgb(0, 0, 0);
		z-index: 999;
	}
</style>
